<template>
  <div class="dashboard-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>班次产量统计</span>
      </div>
      <el-radio-group v-model="query.shiftOutputType" @change="getShiftOutputData">
        <el-radio label="0">近7天</el-radio>
        <el-radio label="1">近15天</el-radio>
        <el-radio label="2">近30天</el-radio>
      </el-radio-group>
      <ve-histogram :extend="extend" :data="shiftOutputData" :settings="chartSettings"/>
    </el-card>
  </div>
</template>
<script>
import { shiftOutput } from '@/api/statistics/statistics'

export default {
  name: 'ShiftOutput',
  data() {
    return {
      query: {
        shiftOutputType: '0'
      },
      chartSettings: {},
      extend: {
        // x轴的文字倾斜
        // 'xAxis.0.axisLabel.rotate': 45,
        yAxis: {
          // 是否显示y轴线条
          axisLine: {
            show: true
          },
          // 纵坐标网格线设置，同理横坐标
          splitLine: {
            show: false
          },
          // 线条位置
          position: 'left'
        },
        xAxis: {
          axisLine: {
            show: true
          }
        },
        series: {
          label: { show: true, position: 'top' }
        }
      },
      shiftOutputData: {
        columns: ['日期', '合计', '白班', '夜班'],
        rows: []
      }
    }
  },
  mounted() {
    this.getShiftOutputData()
  },
  methods: {
    getShiftOutputData() {
      shiftOutput({ type: this.query.shiftOutputType }).then(resp => {
        this.shiftOutputData.rows = []
        resp.data.forEach(item => {
          this.shiftOutputData.rows.push({ '日期': item.date, '合计': item.quantity, '白班': item.dayQuantity, '夜班': item.nightQuantity })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
